<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/12/3
  Time: 15:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>请注册</title>
   <link rel="stylesheet" href="static/css/beijing.css" type="text/css">
    <link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="static/js/jquery-3.4.1.min.js"></script>
    <script>
        //发送验证码
        function sendCode(obj){
            var phone=$("#phone").val();
            if(!isPhone()){
                $.ajax({
                    url:'${pageContext.request.contextPath}/user/sendCode',
                    type:'get',
                    data:{"phone":phone},
                    dataType:'json',
                    success:function (msg) {
                        console.log(msg);
                        alert(msg.code);
                    }
                })
                setTime(obj);
            }else {
                return;
            }

        }
        //判断手机号是否为空
        function isPhone(){
            var phone=$("#phone").val();
            var reg = /^1[3|4|5|7|8][0-9]{9}$/; //验证规则
            //判断手机号是否为空
            if(phone!=""){
                if(!reg.test(phone)){
                    $("#phoneSpan").html("<span style='color: red'>×</span>");
                    return false;
                } else {
                    $("#phoneSpan").html("<span style='color: green'>√</span>");
                }
            }else {
                $("#phoneSpan").html("<span style='color: red'>手机号不能为空</span>");
                return;
            }
        }
        //60s倒计时实现逻辑
        var countdown = 60;
        function setTime(obj) {
            if (countdown == 0) {
                obj.removeAttr("disabled");
                obj.value="点击获取验证码";
                countdown = 60;//60秒过后button上的文字初始化,计时器初始化;
                return;
            } else {
                obj.setAttribute("disabled", true);
                obj.value="重新发送(" + countdown + ")";
               // obj.text("("+countdown+"s)后重新发送") ;
                countdown--;
            }
            setTimeout(function() { setTime(obj) },1000) //每1000毫秒执行一次
        }

    </script>
</head>
<body>
    <form class="form-group" method="post" action="${pageContext.request.contextPath}/user/regirest">
        <table id="zc" class="tab-content table-hover">
            <tr>
                <td>手机号:</td>
                <td><input class="input-group" type="text" id="phone" name="phone" onblur="isPhone()" placeholder="请输入手机号">
                    <span id="phoneSpan"></span>
                </td>
            </tr><br/>
            <tr>
                <td><a  href="javascript:(0)" onclick="sendCode(this)" id="sendcode">获取验证码:</a></td>
                <td><input type="text" id="code" name="code" placeholder="请输入验证码"></td>
            </tr><br/>
            <tr>
                <td><input type="submit" value="立即注册" class="btn"></td>
            </tr><br/>
        </table>
    </form>
</body>
</html>
